<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="id" width="180" />
    <el-table-column prop="username" label="username" width="180" />
    <el-table-column prop="name" label="name" />
    <el-table-column prop="phone" label="phone" />
  </el-table>
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      :page-sizes="page.pageSizes"
      :small="page.small"
      :background="page.background"
      layout="sizes, prev, pager, next, jumper, total"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: "user-info",
  data() {
    return {
      tableData: [],
      page: {
        currentPage: 1,
        pageSize: 5,
        pageSizes: [1, 2, 5, 10],
        small: false,
        background: true,
        total: 0,
      },
    };
  },
  methods: {
    handleSizeChange(size) {
      this.page.pageSize = size;
      // 更新表格数据
      this.getTableData();
    },
    handleCurrentChange(pageNum) {
      this.page.currentPage = pageNum;
      // 更新表格数据
      this.getTableData();
    },
    getTableData() {
      this.$axios
        .get(
          `/test/sysuser/list?pageNumber=${this.page.currentPage}&pageSize=${this.page.pageSize}`
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 200) {
            console.log(data.data);
            this.page.currentPage = data.data.pageNum;
            this.page.total = data.data.total;
            this.tableData = data.data.list;
          }
        });
    },
  },
  mounted() {
    this.getTableData();
  },
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
